<template>
	<div class="content">
		<el-form label-width="80px">
			<el-form-item label="学历">
				<el-input 
					v-model="educationName"/>
			</el-form-item>
			<el-form-item label="学历类型">
				<el-input 
					v-model="educationType"/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">提交</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="info" @click="getList">刷新</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<pseudo-paging-table
				:data="data"
				:pagesize="pagesize"
				ref="table">
				<el-table-column
					prop="educationName"
					label="学历"
					width="180" />
				<el-table-column
					prop="educationType"
					label="学历类型"/>
			</pseudo-paging-table>
		</el-row>
	</div>
</template>
<script>
import PseudoPagingTable from '@/components/PseudoPagingTable'

export default {
	data () {
		return {
			data: [],
			pagesize: 2,
			educationName: '',
			educationType: ''
		}
	},
	methods: {
		async getList () {
			const res = await this.$http.get('/education')
			this.data = res.data.slice(0)
			this.$nextTick(() => {
				this.$refs.table.reset()
			})
		},
		async submit () {
			const res = await this.$http.post('/education', {
				educationName: this.educationName,
				educationType: this.educationType
			})
			const { code } = res
			if (code === 200) {
				this.getList()
			} else {
				this.$alert('创建失败', '提示')
			}
		}
	},
	created () {
		this.getList()
	},
	components: {
		PseudoPagingTable
	}
}
</script>
